<template>
  <div class="theme-switch">
    <button class="theme-toggle" @click="toggleThemePanel">
      <svg viewBox="0 0 24 24" class="theme-icon">
        <path fill="currentColor" d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
      </svg>
    </button>

    <div class="theme-panel" :class="{ 'theme-panel-open': isOpen }">
      <div class="theme-header">
        <h3>选择主题</h3>
        <button class="close-button" @click="toggleThemePanel">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"/>
          </svg>
        </button>
      </div>

      <div class="theme-list">
        <button 
          v-for="theme in themes" 
          :key="theme.id"
          class="theme-item"
          :class="{ active: currentTheme === theme.id }"
          :style="{
            backgroundColor: theme.containerBg,
            borderColor: theme.borderColor
          }"
          @click="selectTheme(theme.id)"
        >
          <span class="theme-name">{{ theme.name }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { themes } from '../themes'

const props = defineProps({
  currentTheme: {
    type: String,
    default: 'default'
  }
})

const emit = defineEmits(['change'])

const isOpen = ref(false)

const toggleThemePanel = () => {
  isOpen.value = !isOpen.value
}

const selectTheme = (themeId) => {
  emit('change', themeId)
  isOpen.value = false
}
</script>

<style scoped>
.theme-switch {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: v-bind('themes[currentTheme].containerBg');
  border: 1px solid v-bind('themes[currentTheme].borderColor');
  color: v-bind('themes[currentTheme].secondaryColor');
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  color: v-bind('themes[currentTheme].primaryColor');
  transform: rotate(30deg);
}

.theme-icon {
  width: 24px;
  height: 24px;
}

.theme-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  width: 280px;
  background-color: v-bind('themes[currentTheme].containerBg');
  border: 1px solid v-bind('themes[currentTheme].borderColor');
  border-radius: 12px;
  box-shadow: 0 4px 12px v-bind('themes[currentTheme].shadowColor');
  transform: translateX(120%);
  transition: transform 0.3s ease;
}

.theme-panel-open {
  transform: translateX(0);
}

.theme-header {
  padding: 16px;
  border-bottom: 1px solid v-bind('themes[currentTheme].borderColor');
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.theme-header h3 {
  margin: 0;
  color: v-bind('themes[currentTheme].textColor');
  font-size: 16px;
}

.close-button {
  padding: 4px;
  background: none;
  border: none;
  color: v-bind('themes[currentTheme].secondaryColor');
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-button:hover {
  color: v-bind('themes[currentTheme].textColor');
  background-color: v-bind('themes[currentTheme].assistantBg');
}

.theme-list {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.theme-item {
  height: 80px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  transition: all 0.2s;
  position: relative;
}

.theme-item:hover {
  transform: translateY(-2px);
}

.theme-item.active {
  border-color: v-bind('themes[currentTheme].primaryColor');
}

.theme-name {
  color: #ffffff;
  font-size: 14px;
}
</style> 